<template>
  <div>
    <div class="graph">
      <div id="space"></div>
      <div id="cost"></div>
      <div id="income"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from "axios";

export default {

  mounted () {
    this.init();
    this.initIncome();
  },
  name: "Finance",
  data () {
    return {
      space: {
        title: {
          text: "场地预约状况",
          textAlign: 'left',
        },
        series: [{
          type: 'pie',
          data: null,
          label: {
            normal: {
              show: true,
              formatter: '{b}预约数: {c}  占比:{d}%' // 自定义显示格式(b:name, c:value, d:百分比)
            }
          },
          radius: '70%'
        }]
      },
      cost: {
        title: {
          text: '场地收入详情'
        },
        tooltip: {},
        /*  legend: {
            data: ['单位/元']
          }, */
        xAxis: {
          data: null
        },
        yAxis: {},
        series: [
          {
            name: '收入(元)',
            type: 'bar',
            data: null
          }
        ]
      },
      income: {
        title: {
          text: "近期预约收入",
          textAlign: 'left',
        },
        xAxis: {
          data: null
        },
        yAxis: {},
        tooltip: {},
        series: [
          {
            data: null,
            type: 'line',
            smooth: true,
            label: {
              show: false,
              position: 'bottom',
              textStyle: {
                fontSize: 14
              }
            }
          }
        ]
      },
      dates: [],
      sum: [],

    }
  },

  methods: {
    init () {
      axios.get("/admin/queryOrderSpaceMsg").then(res => {
        const data = res.data;
        if (data.code === 200) {
          this.space.series[0].data = data.data
          this.initGraphSpace()
        } else {
          this.$message.error("初始化场地失败")
        }
      })
      axios.get("/admin/queryOrderSpaceCostMsg").then(res => {
        const data = res.data;
        const name = [];
        const cost = [];
        if (data.code === 200) {
          for (const item of data.data) {
            name.push(item.name);
            cost.push(item.value)
          }
          this.cost.xAxis.data = name;
          this.cost.series[0].data = cost;
          this.initGraphCost();
        } else {
          this.$message.error("初始化场地收入失败")
        }
      })
    },
    initGraphSpace () {
      echarts.init(document.getElementById("space")).setOption(this.space);
    },
    initGraphCost () {
      echarts.init(document.getElementById("cost")).setOption(this.cost);
    },
    initGraphIncome () {
      echarts.init(document.getElementById("income")).setOption(this.income);
    },
    initIncome () {
      axios.get("/admin/queryRecentOrderMsg").then(res => {
        const data = res.data
        if (data.code === 200) {
          for (const item in data.data) {
            this.dates.push(item)
            this.sum.push(data.data[item]);
          }
          this.income.xAxis.data = this.dates
          this.income.series[0].data = this.sum

          this.initGraphIncome();
        }
      })
    }
  }
}
</script>

<style scoped>

.graph {
  display: inline-block;
}

#space {
  width: 500px;
  height: 250px;
  position: absolute;
}

#cost {
  width: 500px;
  height: 250px;
  margin-left: 600px;
  position: absolute;
}

#income {
  width: 900px;
  height: 300px;
  margin-top: 320px;
  margin-left: 200px;
  position: absolute;
}

</style>
